<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="description" content=""/>
  <meta name="keywords" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>Teemor</title>
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" href="assets/i/favicon.png"/>
  <meta name="mobile-web-app-capable" content="yes"/>
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"/>
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"/>
  <meta name="msapplication-TileColor" content="#0e90d2"/>
  <link rel="stylesheet" href="http://resource.teemor.xyz/amazeui.css"/>
  <link rel="stylesheet" href="http://resource.teemor.xyz/app.css"/>
    <style type="text/css">
        body{
            background-image: url("http://resource.teemor.xyz/314693.jpg");
            background-attachment: fixed;
            background-size:100%;
        }

        #dock a:link    {}
        #dock a:visited {}
        #dock a:hover   {}
        #dock a:active  {}


    </style>

</head>

<body id="blog">
<div id="vueContent">
    <div class="am-g am-g-fixed blog-fixed"  style="width: 100%;border: 0px solid white;border-radius: 2px;margin-top: 0px;">
        <nav class="am-g am-g-fixed blog-fixed blog-nav" style="width: 100%;margin-left: 0px;margin-right: 0px;padding: 0px;">
            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button" v-on:click="isShow=!isShow,isShowImg(isShow)" style="margin: 0px;width: 100%;background: white;color:black;border: 0px solid" data-am-collapse="{target: '#blog-collapse'}" ><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
            <div class="am-collapse am-topbar-collapse" id="blog-collapse" style="background: white;font-weight: bold;">
                <ul class="am-nav am-nav-pills am-topbar-nav" id="dock" style="margin: 0">
                    <li ><a href="/" style="color: black;font-weight: bold;font-size: 18px">首页</a></li>
                    <li><a href="img.html" style="color: black;font-weight: 100">图片库</a></li>
                    <li><a href="timeline.html" style="color: black;font-weight: 100">归档</a></li>
                    <li><a href="javascript:;;" v-on:click="msgBox('简简单单')" style="color: black;font-weight: 100">关于我</a></li>
                </ul>
            </div>
        </nav>
        <img src="	http://resource.teemor.xyz/f61a148c-73ed-40dd-b998-34cb3f997fa0"  id="topImg" style="border: 0px solid white" width="100%;" v-bind:style="{display:showImg}">

    </div>
    <!-- content srart -->
    <div id="now" class="am-g am-g-fixed blog-fixed" style="height: 2em;width: 100%;background: white;color: black; text-align: center;line-height: 2em;font-weight: bold;color:#b2e2fa;font-size: 2rem;margin-top: 0px" >
        now
    </div>
    <div class="am-g am-g-fixed blog-fixed" id="article" style="background: rgba(255,255,255,1);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;" >
        <div class="am-u-md-8 am-u-sm-12">
            <article class="am-g blog-entry-article" v-for="article in articles" style="height: auto">
                <a v-bind:href="'article?id='+article.bid">
                    <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                        <img v-bind:src="article.cover" alt=""  class="am-u-sm-12">
                    </div>
                </a>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <span><a href="" class="blog-color">{{article.type}}</a></span>
                    <span> {{article.author}}</span>
                    <span>{{article.bdate}}</span>
                    <h1><a v-bind:href="'article?id='+article.bid">{{article.btitle}}</a></h1>
                    <p>{{article.bSummary}}
                    </p>
                    <p><a href="" class="blog-continue">continue reading</a></p>
                </div>
            </article>
            <ul class="am-pagination">
                <li class="am-pagination-prev color-black"><span class="color-black"  v-on:click="pageIndex--;getArticle()">&laquo; Prev</span></li>
                <li class="am-pagination-next color-black"  v-on:click="pageIndex++;getArticle()"><span class="color-black" >Next &raquo;</span></li>
            </ul>
        </div>

        <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title color-black"><span>About ME</span></h2>
                <img src="images/head.jpg" id="head_img" alt="about me" class="blog-entry-img" >
                <p>teemor</p>
                <p>
                   简简单单清清白白凄凄惨惨戚戚
                </p><p>{{summary_2}}</p>
            </div>
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title color-black"><span>Contact ME</span></h2>
                <p>
                    <a href="javascript:;;" v-on:click="msgBox('QQ:1850252892')"><span class="am-icon-qq am-icon-fw am-primary blog-icon " style="color: black"></span></a>
                    <a href="https://github.com/1850252892"><span class="am-icon-github am-icon-fw blog-icon" style="color: black"></span></a>
                    <a href="javascript:;;" v-on:click="msgBox('不玩这玩意')"><span class="am-icon-weibo am-icon-fw blog-icon" style="color: black"></span></a>
                    <!--<a href="#" v-on:click="msgBox('功能建设中')"><span class="am-icon-reddit am-icon-fw blog-icon" style="color: black"></span></a>-->
                    <a href="javascript:;;" v-on:click="msgBox('不能暴露')"><span class="am-icon-weixin am-icon-fw blog-icon" style="color: black"></span></a>
                </p>
            </div>
            <div class="blog-clear-margin blog-sidebar-widget blog-bor am-g color-black">
                <h2 class="blog-title"><span>TAG Group</span></h2>
                <div class="am-u-sm-12 blog-clear-padding">
                    <div  v-for="tag in tags">
                        <a class="blog-tag color-black" v-bind:href="'tags.html?tagId='+tag.gId" >{{tag.gName}}({{tag.bCount}})</a>
                    </div>

                </div>
            </div>
            <div class="blog-sidebar-widget blog-bor color-black">
                <h2 class="blog-title color-black"><span>New Article</span></h2>
                <ul class="am-list">
                    <li><a v-bind:href="'article?id='+article.bid" v-for="article in articlesTop" style="color: black;background: rgba(0,0,0,0);text-align: left;">{{article.btitle}}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- content end -->

    <footer class="blog-footer" style="background-image: url('http://resource.teemor.xyz/30.jpg')">
        <div class="blog-text-center">Copyright © 2015-2019 teemor. 蜀ICP备18022740号 </div>
    </footer>
</div>
<script src="http://resource.teemor.xyz/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://resource.teemor.xyz/amazeui.ie8polyfill.min.js"></script>
<script src="http://resource.teemor.xyz/amazeui.min.js"></script>
<script type="text/javascript" src="http://resource.teemor.xyz/layui.js"></script>
<script src="/layui/layui.js"></script>
<script src="http://resource.teemor.xyz/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    $(function(){
        getTime();
        setInterval("getTime();",1000); //每隔一秒运行一次
    })
    //取得系统当前时间
    function getTime(){
        var myDate = new Date();
        var date = myDate.toLocaleDateString();
        var hours = myDate.getHours();
        var minutes = myDate.getMinutes();
        var seconds = myDate.getSeconds();
        date=date.replace("/","-").replace("/","-");
        $("#now").html("【NOW】"+date+" "+hours+":"+minutes+":"+seconds); //将值赋给div
    }
    var myAxios = axios.create({
        baseURL: '/',
        // timeout: 5000,
        headers: {'Content-Type': 'application/json'}
    });
    myAxios.get("/getImgPath?name=首页")
        .then(function (rs) {
            if (rs.data!=null && rs.data!="")
                $("#topImg").attr("src",rs.data);
        })
    myAxios.get("/getImgPath?name=头像")
        .then(function (rs) {
            if (rs.data!=null && rs.data!="")
                 $("#head_img").attr("src",rs.data);
        })
    var layer;
    layui.use(['layer','form'],function(){
        layer=layui.layer,form = layui.form;
    })
    var article_init=[{
        "type":"article",
        summary:"模板简介",
        "article_img":"assets/i/f10.jpg",
        "article_author":"@amazeUI",
        "article_date":"2015/10/9",
        "article_title":"我本楚狂人，凤歌笑孔丘",
        "article_summary":"我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变。"

    }];
    var app=new Vue({
        el: '#vueContent',
        data:{
            summary_2:'我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变',
            articles:article_init,
            account:'',
            pageIndex:1,
            pageSize:6,
            isPass:false,
            password:'',
            regType:'0',
            verCode:'',
            verLabel: '验证码',
            totalTime: 5,
            timer:null,
            ds:false,
            verClass:'layui-btn layui-btn-normal',
            tags:"",
            articlesTop:"",
            showImg:"block",
            isShow:true
        },
        methods: {
            getJson(){
                var _this=this;

                myAxios.get('article/getArticles',{
                   params:{
                       "pageIndex":_this.pageIndex,
                       "pageSize":_this.pageSize
                   }
                })
                    .then(function (response) {
                        var data=response.data;

                    _this.articles=data;
                })
            },
            getArticle(){
                var _this=this;
                if (_this.pageIndex<1)
                    _this.pageIndex=1;
                myAxios.get('article/getArticles',{
                    params:{
                        "pageIndex":_this.pageIndex,
                        "pageSize":_this.pageSize
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.articles=data;
                    })
            },
            getTags(){
                var _this=this;
                myAxios.get('groupmodel',{
                    params:{
                        'username':1008612
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.tags=data;
                    })
            },
            msgBox(data){
                layer.msg(data);
            },
            isShowImg(isShow){
                if (isShow)
                    this.showImg="block";
                else
                    this.showImg="none";
            },
            getTop(){
                var _this=this;
                myAxios.get('article/getArticles',{
                    params:{
                        "pageIndex":1,
                        "pageSize":5
                    }
                })
                    .then(function (response) {
                        var data=response.data;
                        _this.articlesTop=data;
                    })
            }
        }
    });
    app.getArticle();
    app.getTags();
    app.getTop();
</script>
</body>
</html>